<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
#parse("/WEB-INF/views_webapp/layout/css.html")
<style type="text/css">
html,body{
	width: 100%;
	height: 100%;
}
#paybtns{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0 0 1rem 0;
	height: 10rem;
	overflow: hidden;
	background: #fff;
}
.jflex{
	display: flex;
	display: -webkit-flex;
}
.pabnull{
	width: 2rem;
}
.buynowbox{
	flex: 1;
	-webkit-flex: 1;
}
#buynow{
	display: block;
	width: auto;
	height:5rem;
	background: #000;
	text-align: center;
	line-height: 5rem;
	border-radius:4px;
	font-size: 3rem;
	color: #fff;
}
.buy-scan{
	width:7rem;
}
#scanbtn{
	display: block;
	width: 5rem;
	height: 5rem;
	text-align: center;
	line-height:5rem;
	background: #000;
	margin: 0 auto;
	border-radius:4px;
	font-size: 3rem;
	color: #fff;
}
#paycount{
	width: auto;
	height: 4rem;
	line-height: 4rem;
	text-align: center;
	font-size:1.5rem;
}
.red{
	color: red;
}
#firstitem{
	width: auto;
	height: auto;
	height: 100%;
	padding: 3rem 0 0 0;
	position: relative;
}
#firstitem-title{
	width: auto;
	height:5rem;
	text-align: center;
	line-height:3rem;
	font-size: 2rem;
	color: #000;
}
#firstitem-img{
	padding:0 2rem 0 2rem;
	position: relative;
}
#firstFee{
	width: 10rem;
	height: 10rem;
	border-radius: 10rem;
	background: #EF2413;
	position: absolute;
	bottom: 1rem;
	right:3.5rem;
	text-align: center;
	color: #fff;
	display: flex;
	display: -webkit-flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}
#ifee1{
	font-size: 2rem;
	padding-bottom: 0.3rem;
	display: block;
}
#ifee2{
	display: block;
	font-size: 2rem;
}
#ifee3{
	display: block;
	font-size: 1rem;
	text-decoration:line-through
}
/**item-listbox**/
.jflex{
    display: -webkit-box; 
    display: -webkit-flex;
    display: flex;
    justify-content:space-between;
	-webkit-justify-content: space-between;
	flex-wrap:wrap;
	-webkit-flex-wrap: wrap;
}
#item-listbox{
	padding:2rem 1rem 10rem 1rem;
}
.gitem{
	width: 45%;
	border: 1px solid #eee;
	margin-bottom: 2rem;
	padding: 0.5rem;
	border-radius:4px;
	position: relative;
}
.gitem-close{
	display: block;
	width: 2rem;
	height: 2rem;
	border: 1px solid  #ccc;
	position: absolute;
	top: -1rem;
	right: -1rem;
	background: #f5f5f5;
	text-align: center;
	line-height: 2rem;
	border-radius: 2rem;
	font-size: 1rem;
	line-height: 1.8rem;
}
.gitem-buyfee{
	font-size: 1.4rem;
}
.gitem-oldfee{
	font-size: 0.9rem;
	text-decoration:line-through
}
.gitem-fees{
	text-align: center;
}
.gitem-img{
	
}
.gitem:nth-of-type(even){
	margin-right: 1rem;
}
/**item-listbox end**/
</style>
</head>
<body>
<div id="item-listbox" class="jflex hide">
	<div class="gitem animated">
		<div class="gitem-img">
			<img src="${base}/static/res/admin/img/t.png" class="img"/>
		</div>
		<div class="gitem-fees">
			<span class="gitem-buyfee red">￥2.50</span>
			<span class="gitem-oldfee">￥2.9</span>
		</div>
		<a class="gitem-close"><i class="iconfont icon-close"></i></a>
	</div>
	<div class="gitem animated">
		<div class="gitem-img">
			<img src="${base}/static/res/admin/img/t.png" class="img"/>
		</div>
		<div class="gitem-fees">
			<span class="gitem-buyfee red">￥2.50</span>
			<span class="gitem-oldfee">￥2.9</span>
		</div>
		<a class="gitem-close"><i class="iconfont icon-close"></i></a>
	</div>
	<div class="gitem animated">
		<div class="gitem-img">
			<img src="${base}/static/res/admin/img/t.png" class="img"/>
		</div>
		<div class="gitem-fees">
			<span class="gitem-buyfee red">￥2.50</span>
			<span class="gitem-oldfee">￥2.9</span>
		</div>
		<a class="gitem-close"><i class="iconfont icon-close"></i></a>
	</div>
	<div class="gitem animated">
		<div class="gitem-img">
			<img src="${base}/static/res/admin/img/t.png" class="img"/>
		</div>
		<div class="gitem-fees">
			<span class="gitem-buyfee red">￥2.50</span>
			<span class="gitem-oldfee">￥2.9</span>
		</div>
		<a class="gitem-close"><i class="iconfont icon-close"></i></a>
	</div>
	<div class="gitem animated">
		<div class="gitem-img">
			<img src="${base}/static/res/admin/img/t.png" class="img"/>
		</div>
		<div class="gitem-fees">
			<span class="gitem-buyfee red">￥2.50</span>
			<span class="gitem-oldfee">￥2.9</span>
		</div>
		<a class="gitem-close"><i class="iconfont icon-close"></i></a>
	</div>
	<div class="gitem animated">
		<div class="gitem-img">
			<img src="${base}/static/res/admin/img/t.png" class="img"/>
		</div>
		<div class="gitem-fees">
			<span class="gitem-buyfee red">￥2.50</span>
			<span class="gitem-oldfee">￥2.9</span>
		</div>
		<a class="gitem-close"><i class="iconfont icon-close"></i></a>
	</div>
	
</div>	
	
	
<div id="firstitem" >
	<div id="firstitem-title">
		这里是一个商品的标题
	</div>
	<div id="firstitem-img">
		<img src="${base}/static/res/admin/img/t.png" class="img"/>
		<div id="firstFee">
			<div>
				<span id="ifee1">优惠价</span>
				<span id="ifee2">￥2.50</span>
				<span id="ifee3">原价￥2.50</span>
			</div>
		</div>
	</div>
</div>

<div id="paybtns">
	<div id="paycount">
		总共需要支付：<span class="red">￥2.50</span>
	</div>
	<div class="jflex">
		<div class="pabnull"></div>
		<div class="buynowbox"><a id="buynow">立即购买</a></div>
		<div class="buy-scan">
			<a id="scanbtn">扫</a>
		</div>
		<div class="pabnull"></div>
	</div>
</div>
#parse("/WEB-INF/views_webapp/layout/bottom.html")
<script>
	$(".gitem-close").click(function(){
		
		$(this).parent().addClass("bounceOut");
		
		var that=$(this).parent();
		window.setTimeout(function(){
			that.remove();
		},1000);
	});
</script>
</body>
</html>